<!DOCTYPE html>
<html lang="en" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/custom.form.css">
    <script src="/js/live/NewPlayer/vcplayer.min.js"></script>
    
    <!-- <script src="/js/video/jquery.min.js"></script>
    <script src="/js/video/EasyPlayer-element.min.js"></script> -->
    
   <!-- <script src="/js/video/jquery-1.10.2.min.js"></script>
	<script src="/js/video/sha256.js"></script>
	 <script src="/js/video/hmac-sha256.js"></script> 
	<script src="/js/video/enc-base64-min.js"></script>
	<script src="/js/video/enc-base64-min.js"></script>
	<script src="/js/video/jQuery.md5.js"></script>
	-->
    <style>
        .custom-tree-item-clicked{color:#FC9003}
        
	   .layui-card {
	      
	       overflow-y: auto;
	   }
	
	   .layui-card {
	       overflow-x: auto;
	       height : 620px;
	   }

    </style>
</head>
<body>
<!-- 左树 -->
<div class="layui-fluid">
    <input hidden id="wsUrl">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm12 layui-col-md4 layui-col-lg2">
            <div class="layui-card">
                <div class="layui-card-body mini-bar" id="leftTree">
                </div>
            </div>
        </div>
        <div class="layui-col-sm12 layui-col-md8 layui-col-lg10">
            <!-- <easy-player  id="player" live="true" show-custom-button="true" isH265="true" ></easy-player> -->
            <!-- <video id="video-player" controls preload="auto" width="100%" height="100%"></video> -->
        	<!-- <video id="my-player" preload="auto" muted autoplay type="rtmp/flv">
   				<source src="">
   			</video> -->
   			
   			
   			<div id="playContent" class="player">
        <div id="player" class="player"></div>
    </div>
	<!-- <button onclick="loadplayer();">play</button><br>
    <button onclick="stopplay();">stop</button><br> -->
    
        </div>
    </div>
    
</div>


<script type="text/html" id="tool">
    
</script>

<script src="/layui/layui.all.js"></script>

<script src="/js/core.util.js"></script> 
<script src="/js/video/crypto-js.min.js"></script>

<script>
    //获取token
    var token = CoreUtil.getData("access_token");
    //地址栏转义token中的#号
    var tokenQuery = token.replace("#", "%23");
    var tableIns1;
    var table = layui.table;
    var form = layui.form;
    var layer = layui.layer;
    var $ = jQuery = layui.jquery;
    var laydate = layui.laydate;
    var tree = layui.tree;
    var transfer = layui.transfer;
    var id = null;
    var type = null;
    
    var startTime = null;
    var endTime = null;
    
    layui.use(['table', 'layer', 'laydate', 'tree', 'transfer'], function () {
		
        initLeftTree();
		
        
        //签名算法
        function MakeSign(url, apppass) {
            //url --要签名的URL,  apppass -- 平台密码
            //url要签名的字符串,参数顺序按首字母升序排列。url中的app=平台用户名, 将url做HmacSHA256散列，散列的加密key是平台密码的MD5值
            var key = $.md5(apppass);
            var signatureSHA = CryptoJS.HmacSHA256(url, key);// token 
            console.log("signatureSHA:" + signatureSHA);
            var signatureBase64 = CryptoJS.enc.Base64.stringify(signatureSHA); // base64
            console.log("signatureBase64:" + signatureBase64);
            var signURI = encodeURIComponent(signatureBase64);     // URI编码
            console.log("signatureBaseURI:" + signURI);
            return signURI;
        }
        
        
        $("#btn_cancel").click(function () {
            $(".user_table_div").show();
            $("#leftTree").show();
            $(".operation_user").hide();
            return false;
        });
        
        
        
        var loadDeptTree = function (data) {
            tree.render({
                elem: '#deptTree'
                , data: data
                , onlyIconControl: true  //是否仅允许节点左侧图标控制展开收缩
                , click: function (obj) {
                    selectNode = obj;
                    layer.msg(JSON.stringify(selectNode.data.title));
                }
            });
        };

        var loadLeftTree = function (data) {
            tree.render({
                elem: '#leftTree'
                , data: data
                , onlyIconControl: true  //是否仅允许节点左侧图标控制展开收缩
                , click: function (obj) {
                    console.log(obj)
                    id = obj.data.id;
                    type = obj.data.type;
                    if(type == "cam"){
                    	$("#leftTree span").removeClass('custom-tree-item-clicked');     //清除旧的样式
                        $("#leftTree span:contains(" + obj.data.title + ")").addClass('custom-tree-item-clicked');
                        
                        search();
                    }else{
                    	layer.msg("请选择区域！");
                    	return false;
                    }
                    

                }
            });
        };
        
        function initLeftTree(){
            CoreUtil.sendGet("/gas/stationinfo/tree", null, function (res) {
                loadLeftTree(res.data);
                loadDeptTree(res.data);
            });
        }
        
    });

    //执行查询
    function search() {
    	var _wsUrl = $("#wsUrl").val();
    	
    	if(!CoreUtil.isEmpty(_wsUrl)){
    		var _ws = new WebSocket(_wsUrl);
    		_ws.onclose = function(event) {
			    console.log("关闭上一个WebSocket ：" + _wsUrl);
			    
			};
    	}
    	
        var map = {
        	id : id
        }
    	 //这里以搜索为例
    	CoreUtil.sendPost("/gas/realvideo/geturl", map, function (res) {
            if(res.code == "0"){
            	console.log(res.data);
            	var url = res.data + "&auth=&_=" + new Date().getTime();
            	console.log(url);
                $.ajax({
                    url: url,
                    type: "GET",
                    success: function (data) {
                        
                        var setting = {
                            httpurl: JSON.parse(data).playerUrl.httpflv,
                            rtmpurl: JSON.parse(data).playerUrl.rtmp,
                            controlUrl: JSON.parse(data).playerUrl.ctrl,
                            isLive: true,
                            cb_playtime: playTimeChanged,
                            cb_playstatus: playStatusChanged,
                            videoElement: 'player'
                        };

                        player = vcplayer.createPlayer(setting);
                        player.Play();
                        
                        
                    	/* var video = document.getElementById('video-player');
            			video.src = JSON.parse(data).playerUrl.httpflv; // 替换为你的HTTP-FLV视频流地址
            			video.play(); */
            			
            			
            			
            			/* $('#player').attr('video-url',JSON.parse(data).playerUrl.httpflv); */
            			
            			/*videoElement = document.getElementById('my-player');
						 if (flvjs.isSupported()) {
						    flvPlayer = flvjs.createPlayer({
						        type: 'flv',
						        isLive: true,
						        url: JSON.parse(data).playerUrl.httpflv,//flv格式流地址
						    },{
						        enableWorker: false, //不启用分离线程
						        enableStashBuffer: false, //关闭IO隐藏缓冲区
						        reuseRedirectedURL: true, //重用301/302重定向url，用于随后的请求，如查找、重新连接等。
						        autoCleanupSourceBuffer: true //自动清除缓存
						    });
						    flvPlayer.attachMediaElement(videoElement);
						    flvPlayer.load(); //加载
						    flvPlayer.play();//播放
						} */

            			
            			
            			
            			// 创建WebSocket连接
            			var ws = new WebSocket(JSON.parse(data).playerUrl.ctrl);
						$("#wsUrl").val(JSON.parse(data).playerUrl.ctrl);
						
            			// 当WebSocket打开时，发送保活消息
            			ws.onopen = function(event) {
            			    console.log("WebSocket 连接已打开");
            			    // 设置保活间隔，例如每3秒发送一次保活消息
            			    setInterval(function() {
            			    	// 保活消息内容
            			    	console.log("发送保活信息：HeartBeat");
            			    	var msg = {
            			    		Command:'HeartBeat',
            			    		Params:null
            			    	}
            			    	ws.send(JSON.stringify(msg)); 
            			    }, 2000);
            			};
            			// 接收到服务器消息时的回调
            			ws.onmessage = function(event) {
            			    console.log("收到消息: " + event.data);
            			};
            			// 连接关闭的回调
            			ws.onclose = function(event) {
            			    console.log("WebSocket 连接已关闭");
            			};
            			// 处理错误的回调
            			ws.onerror = function(error) {
            			    console.error("WebSocket 出错: " + error);
            			};
            			
                    },
                    error: function () {

                    }
                }) 
                
                
            }else{
            	layer.msg(res.msg);
            }
            
        });
    };
    
    function playTimeChanged(player, time) {
        console.log("player time changed:" + time);
    }

    function playStatusChanged(player, status) {
        console.log("player status changed:" + status);
    }
    
    
    function request(url){
    	
    }
  
</script>
</html>